<template>
  <div id="credit-detail">
    <scroller lock-x scrollbar-y use-pullup @on-pullup-loading="loadMore" v-model="status" ref="scroller">
      <div class="box2">
        <div v-for="(credit, index) in detaillist" :key="index">
          <div class="credit-title">{{credit.title}}</div>
          <ul class="circle-content">
              <li>
                <img class="install-headerimg" v-if="credit.userHeadImage" :src="credit.userHeadImage" />
                <img class="install-headerimg" v-else src="../../../static/img/installheaderimg.jpg" />
                <div><p>{{credit.userName}}</p><p>{{credit.createTime | timecircle}}  关注：<span>{{credit.watchCnt}}</span> 回复：<span>{{credit.commentCnt}}</span></p></div>
                <attention :itematt="credit"></attention>
              </li>
              <li>
                <div v-if="credit.content">{{credit.content}}</div>
                <div v-if="credit.picUrl" class="detail-img"><img :src="credit.picUrl" /></div>
              </li>
          </ul>
          </div>
          <div class="circle"></div>
          <div class="tab-review" v-if="!nodatashow">
            <div>共<span>{{commentnumber}}</span>条评论</div>
            <div @click="sort">
              <img src="../../../static/img/paixun@2x.png" />{{defaultvalue}}
              <transition name="side">
                <div class="side-sort" v-show="sortshow">
                  <p @click.stop="defaultevent">默认排序</p>
                  <p @click.stop="newest">最新排序</p>
                </div>
              </transition> 
            </div>
          </div>
          <div class="review-content" v-if="!nodatashow">
            <ul class="circle-content circle-review" v-for="(item, index) in creditlist" :key="index">
              <li>
                <img class="install-headerimg"  v-if="item.userHeadImage" :src="item.userHeadImage" />
                <img class="install-headerimg" v-else src="../../../static/img/installheaderimg.jpg" />
                <div><p>{{item.userName}}</p><p>{{item.createTime | timecircle}}</p></div>
                <span>{{item.likeCnt}}</span>
                <img class="give-like" v-if="item.likeIt === false"  @click.self.stop="like(index)" src="../../../static/img/weidianzan@2x.png" />
                <img class="give-like" v-if="item.likeIt === true"  src="../../../static/img/yidianzan@2x.png" />
              </li>
              <li>{{item.content}}</li>
            </ul>
          </div>
          <load-more v-if="nodatashow" :show-loading="false" :tip="'暂无评论'"  background-color="#fbf9fe"></load-more>
      </div>
      <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40; text-align: center;">
        <span v-show="status.pullupStatus === 'default'"></span>
        <span class="pullup-arrow" v-show="status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
        <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner>加载更多</span>
      </div>
    </scroller>
  </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import Attention from '../../comment/Attention'
import { Scroller, Spinner, LoadMore } from 'vux'
import api from '../../api'
import utils from '../../utils'
export default {
  data () {
    return {
      detaillist: [],
      creditlist: [],
      tokenval: '',
      sortType: 0, // 排序
      nodatashow: false,
      commentnumber: '',
      defaultvalue: '默认排序',
      sortshow: false,
      count: 1,
      PageNum: 100, // 记录每页数
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }
    }
  },
  components: {
    Attention,
    Scroller,
    Spinner,
    LoadMore
  },
  created () {
    window.document.title = '内容详情'
    this.tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    var params = {
      Tokenuser: this.tokenval,
      userid: this.$store.state.userID,
      timestamp: timeStamp,
      id: utils.getQueryString('circle_id')
    }
    api.contentdetail(params).then(res => {
      console.log(res)
      this.detaillist = this.detaillist.concat(res.data)
    })
    this.apiCommit(this.PageNum, this.sortType)
    utils.jssdkwx(api, this.$wechat, this.$store)
  },
  methods: {
    apiCommit (PageNum, sortType) {
      var params = {
        Tokenuser: this.tokenval,
        userid: this.$store.state.userID,
        timestamp: timeStamp,
        id: utils.getQueryString('circle_id'),
        page: 1,
        perPage: PageNum,
        sort: sortType
      }
      api.comment(params).then(res => {
        console.log(res)
        if (res.status === 200) {
          this.creditlist = res.data.list
          if (this.creditlist === undefined || this.creditlist.length === 0) {
            this.nodatashow = true
          } else {
            this.nodatashow = false
            this.commentnumber = this.creditlist.length
          }
        }
      })
    },
    loadMore () {
      this.count ++
      this.PageNum = 10 * this.count + 100
      this.$vux.loading.show({
        text: '加载更多'
      })
      setTimeout(() => {
        this.apiCommit(this.PageNum, this.sortType)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    // 点赞
    like (index) {
      var params = {
        Tokenuser: this.tokenval,
        userid: this.$store.state.userID,
        timestamp: timeStamp,
        likeId: this.creditlist[index].id
      }
      api.commentlike(params).then(res => {
        if (res.status === 200) {
          this.apiCommit(this.PageNum, this.sortType)
        }
      })
    },
    // 点击排序
    sort () {
      this.sortshow = !this.sortshow
    },
    // 默认排序
    defaultevent () {
      this.defaultvalue = '默认排序'
      this.sortshow = false
      this.sortType = 0
      this.apiCommit(this.PageNum, this.sortType)
    },
    // 最新排序
    newest () {
      this.defaultvalue = '最新排序'
      this.sortshow = false
      this.sortType = 1
      this.apiCommit(this.PageNum, this.sortType)
    }
  }
}
</script>
